<script setup>
import {ElButton, ElCol, ElIcon, ElInput, ElRow, ElSpace,ElRate,ElTag, ElTabPane, ElTabs} from "element-plus"
import {useRouter} from "vue-router";
import blogStore from "@/store/blogStore";
import {Search,ArrowUpBold,ArrowDownBold} from "@element-plus/icons-vue";
const router = useRouter();
const store = blogStore();
const default_page_size = 10;
const showFile = (uid)=>{
  router.push({
    path:"/file/article",
    query:{
      uid: uid
    }
  })
}
</script>

<template>
  <div style="display: flex;flex-direction: column;">
    <!-- 搜索框 -->
    <el-row style="justify-content: center;">
      <el-col :span="12">
        <el-input placeholder="请输入查找内容" style="height:42px" >
          <template #prefix>
            <el-icon>
              <Search/>
            </el-icon>
          </template>
          <template #append>
            <el-button>搜索</el-button>
          </template>
        </el-input>
      </el-col>
    </el-row>

    <el-row>
      <!--综合筛选-->
      <el-col ></el-col>
    </el-row>
    <el-divider/>

<!--    数据列表-->
    <el-row>
      <el-col @click="showFile(v.uid)" v-for="(v,i) in store.currentPageData" :key="i" class="pointer" style="margin-bottom:20px;">
        <el-descriptions :column="4" :title="v.title" >
            <el-descriptions-item label="作者" width="200">{{v.author}}</el-descriptions-item>
            <el-descriptions-item label="标签" >
              <el-space size="large">
                <el-tag disable v-for="t in v.tag" >{{t}}</el-tag>
              </el-space>
            </el-descriptions-item>
            <el-descriptions-item label="评价" width="480">
              <el-space>
                <el-button text>点赞</el-button>
                <el-button text>不喜欢</el-button>
                <el-button text>收藏</el-button>
                <el-rate
                    v-model="v.rate"
                    disabled
                    show-score
                    text-color="#ff9900"
                    :score-template="`${v.rate*20}%`"
                />
              </el-space>
            </el-descriptions-item>
            <el-descriptions-item label="时间" width="180">{{v.date}}</el-descriptions-item>
            <el-descriptions-item label="描述" :span="4">
              <el-text >{{v.discription}}</el-text>
            </el-descriptions-item>
          </el-descriptions>
        <el-divider v-if="i!==store.currentPageData.length-1" />
      </el-col>
    </el-row>
<!--    页码-->
    <div class="pagination">
      <el-pagination layout="prev, pager, next" size="large" :total="100" :default-page-size="default_page_size" />
    </div>
  </div>
</template>

<style scoped>
#media .el-space{
  width: 100%;
  height: 100%;
}
#media .el-input{
  width: 70%;
}
.pagination{
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.pointer{
  cursor: pointer;
}
.table-item{
  background: #000;
}
.descriptions-box{
}
</style>